<template>
    <div>
        <h3>材料管理数据中心</h3>
        <el-date-picker class="choice-date" v-model="choice_date" value-format="yyyy-MM-dd" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        <div class="content">
            <div class="charts-block">
                <h5>主材进场统计表</h5>
                <simple-bar id="left-1" :is_precent="false" class="left-1" :data="left_1"></simple-bar>
            </div>
            <div class="table-block">
                <h5>采购事项统计表</h5>
                <div class="table">
                    <el-table :cell-style="getCellStyle" :header-cell-style="getRowClass" stripe :data="table_data" style="width: 100%">
                        <el-table-column label="序号" type="index" width="50">
                        </el-table-column>
                        <el-table-column label="供应商名称" property="supplier"></el-table-column>
                        <el-table-column label="材料名称" property="material"></el-table-column>
                        <el-table-column label="计划收货时间" property="plandeliverytime"></el-table-column>
                        <el-table-column show-overflow-tooltip label="发货情况" property="deliverystatus"></el-table-column>
                        <el-table-column show-overflow-tooltip label="收货情况" property="takedeliverystatus"></el-table-column>
                        <el-table-column show-overflow-tooltip label="延期情况" property="delaystatus"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import SimpleBar from "@/components/charts/SimpleBar.vue";

export default {
    name: 'materials-table',
    components: {
        SimpleBar
    },
    data(){
        return {
            choice_date: ["2018-10-01", "2018-10-12"],
            left_1: {
                x: ["钢筋", "混凝土", "模板", "木枋", "水泥", "砂", "石", "加气块"],
                data: [[23,23,23,23,23,23,23,23], [28,28,28,28,28,28,28,28]],
                name: ["总计划数", "实际进场数"],
                color: ['#5ed8eb', '#649dfa']
            },
            table_data: [
                {
                    supplier: '销售1部',
                    material: '钢筋',
                    plandeliverytime: '2018年11月10日',
                    deliverystatus: '部分发货',
                    takedeliverystatus: '未收货',
                    delaystatus: '0天'
                },
                {
                    supplier: '销售1部',
                    material: '模板、木枋',
                    plandeliverytime: '2018年11月10日',
                    deliverystatus: '部分发货',
                    takedeliverystatus: '部分收货',
                    delaystatus: '0天'
                },
                {
                    supplier: '销售1部',
                    material: '水泥',
                    plandeliverytime: '2018年11月10日',
                    deliverystatus: '部分发货',
                    takedeliverystatus: '-',
                    delaystatus: '0天'
                },
                {
                    supplier: '销售1部',
                    material: '砂、石',
                    plandeliverytime: '2018年11月10日',
                    deliverystatus: '部分发货',
                    takedeliverystatus: '未收货',
                    delaystatus: '0天'
                },
                {
                    supplier: '销售1部',
                    material: '水泥',
                    plandeliverytime: '2018年11月10日',
                    deliverystatus: '全部发货',
                    takedeliverystatus: '部分收货',
                    delaystatus: '0天'
                }
            ]
        }
    },
    methods: {
        getRowClass({ row, column, rowIndex, colIndex }) {
            if (rowIndex === 0) {
                return "background:#f5f7f9;text-align: center;";
            }
        },
        getCellStyle({row, rowIndex}) {
            return "text-align: center"
        }
    }
}
</script>

<style scoped>
@import "../../assets/css/data.css";
h3 {
    margin-top: 20px;
}
.charts-block {
    margin-bottom: 0;
}
.table-block {
    margin-bottom: 0;
}
</style>
